<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 800px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 75%;
      height: 0px;
    }
  </style>
</head>
<body>
  <div>fps: <span id="fps">--</span> | sprites: <span id="spriteCount">1</span></div>
  <div id="paper"></div>
  
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <!--<script src="https://s2.ssl.qhres.com/!39729fa5/sprite2-1.0.0.js"></script>-->
  <script src="/js/spritejs.js"></script>
  <script>
const paper = spritejs.Paper2D('#paper'),
      fglayer = paper.layer('fglayer'),
      Label = spritejs.Label  

paper.setResolution(1600, 600) 

// let dis = 1
// setInterval(() => {
//   fglayer.adjust(context => {
//     context.restore()
//     context.save()
//     context.translate(dis++, dis++)
//   })
// }, 10)

const text1 = new Label('SpriteJS.org 中国')

text1.attr({
  anchor: "0.5",
  pos: [800, 300],
  font: '48px Arial',
  color: '#fff',
  bgcolor: 'blue',
  renderMode: 'stroke',
  // lineHeight: 100,
  scale: [paper.distortion, 1],
  padding: [0, 20, 0, 20],
})


// let i = 1
// text1.draw(context => {
//   context.fillRect(20 * i++, 20, 20, 20)
// }, true)

// text1.on('update', evt => {
//   setTimeout(() => {
//       text1.forceUpdate()
//     }, 500)
// })


fglayer.appendChild(text1)

window.addEventListener('resize', evt => {
  paper.setViewport('auto', 'auto')
})
  </script>
</body>
</html>